<html xmlns:saxon="http://icl.com/saxon">
   <head>
      <link rel="stylesheet" type="text/css" href="doc.css"/>
      <link rel="stylesheet" type="text/css" href=""/>
      <meta author="The MathWorks Ltd."/>
      <meta copyright="2011 The MathWorks Ltd."/>
      <title>createInterface</title>
   </head>

   
    <body>
      <table class="header" width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td bgcolor="#e4f0f8"><A href="User guide.html"><font face="Arial" bgcolor="#e4f0f8" size="+0" underline="0" color="#000000"><b>User guide</b></font></A></td>
            <td width="36" bgcolor="#e4f0f8"><A HREF="User guide8_1.html"><IMG SRC="Images/leftarrow.png" BORDER="0" ALT="previous page"/></A><A HREF="User guide8_3.html"><IMG SRC="Images/rightarrow.png" BORDER="0" ALT="next page"/></A></td>
         </tr>
      </table>
   

      <br clear="all"/>
          
      <h2>8.2: createInterface&nbsp;<a href="User guide8.html"><img src="Images/uparrow.png" border="0" align="top" alt="Go back up one level"/></a></h2>
      
    <p>The interface creation is handled in the <code>createInterface</code>
        subfunction. This has two distinct sections: menu building and widget arrangement.
        The menus are built using the standard MATLAB menu building command <a href="matlab:doc uimenu"><code class="FUNCTION">uimenu</code></a>,
    so let's concentrate on the widget arrangement.</p>

    <p>The top-level layout is a horizontal arrangement, placing the controls
to the left of the main plot. We make the layout draggable by using the
"flex" variant of HBox, and put a panel in each side. Note that setting the
"HelpFcn" for the view panel adds a small "?" icon for bringing up help. See
<a href="PanelHelp.html">here</a> for more details.</p>
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">
<code class="COMMENT">% Add the contents</code>
mainLayout = <a href="uiextras.HBoxFlex.html"><code class="FUNCTION">uiextras.HBoxFlex</code></a>( <code class="STRING">'Parent'</code>, gui.Window, <code class="STRING">'Spacing'</code>, 3 );

<code class="COMMENT">% Create the panels</code>
controlPanel = <a href="uiextras.BoxPanel.html"><code class="FUNCTION">uiextras.BoxPanel</code></a>( ...
   <code class="STRING">'Parent'</code>, mainLayout, ...
   <code class="STRING">'Title'</code>, <code class="STRING">'Select a demo:'</code> );
gui.ViewPanel = <a href="uiextras.BoxPanel.html"><code class="FUNCTION">uiextras.BoxPanel</code></a>( ...
   <code class="STRING">'Parent'</code>, mainLayout, ...
   <code class="STRING">'Title'</code>, <code class="STRING">'Viewing: ???'</code>, ...
   <code class="STRING">'HelpFcn'</code>, @onDemoHelp );

<code class="COMMENT">% Adjust the main layout</code><br/>
<a href="matlab:doc set"><code class="FUNCTION">set</code></a>( mainLayout, <code class="STRING">'Sizes'</code>, [-1,-2]  );
    </font></pre>
    <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/demoBrowser1.png"/></center></font></p>
</example>
<p>The controls panel is filled with a vertical layout containing the listbox
and a button. Note the callbacks that are specified for both the list and button. These
both call further subfunctions that are able to access the common "data" and "gui"
shared structures.</p>
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">
<code class="COMMENT">% Create the controls</code>
controlLayout = <a href="uiextras.VBox.html"><code class="FUNCTION">uiextras.VBox</code></a>( <code class="STRING">'Parent'</code>, controlPanel, ...
   <code class="STRING">'Padding'</code>, 3, <code class="STRING">'Spacing'</code>, 3 );
gui.ListBox = <a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( <code class="STRING">'Style'</code>, <code class="STRING">'list'</code>, ...
   <code class="STRING">'BackgroundColor'</code>, <code class="STRING">'w'</code>, ...
   <code class="STRING">'Parent'</code>, controlLayout, ...
   <code class="STRING">'String'</code>, demoList(:), ...
   <code class="STRING">'Value'</code>, 1, ...
   <code class="STRING">'Callback'</code>, @onListSelection);
gui.HelpButton = <a href="matlab:doc uicontrol"><code class="FUNCTION">uicontrol</code></a>( <code class="STRING">'Style'</code>, <code class="STRING">'PushButton'</code>, ...
   <code class="STRING">'Parent'</code>, controlLayout, ...
   <code class="STRING">'String'</code>, <code class="STRING">'Help for &lt;demo&gt;'</code>, ...
   <code class="STRING">'Callback'</code>, @onDemoHelp );
<a href="matlab:doc set"><code class="FUNCTION">set</code></a>( controlLayout, <code class="STRING">'Sizes'</code>, [-1 28] ); <code class="COMMENT">% Make the list fill the space</code>
</font></pre>
<p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/demoBrowser2.png"/></center></font></p>
</example>
<p>Finally, the view itself is simply an axes placed inside the view panel:</p>   
<example><pre style="background-color: #eeeeff; margin-left: 20px; margin-right: 20px"><font color="#000011">
<code class="COMMENT">% Create the view</code>
gui.ViewAxes = <a href="matlab:doc axes"><code class="FUNCTION">axes</code></a>( <code class="STRING">'Parent'</code>, gui.ViewPanel );
   </font></pre>
   <p style="background-color: #ddddee; margin-left: 20px; margin-right: 20px"><font color="#000022"><center><img src="Images/demoBrowser3.png"/></center></font></p>
</example>
                 <p><small>(Full source code for this application is available here: 
                     [ <a href="Examples/demoBrowser.m">view</a>
                     | <a href="matlab: edit(fullfile(layoutRoot,'layoutHelp','Examples','demoBrowser.m'))">edit</a>
                     | <a href="matlab: p=pwd();cd(fullfile(layoutRoot,'layoutHelp','Examples')); demoBrowser; cd(p)">run</a> ]
                 )</small></p>
    
      
      <br clear="ALL"/>
      <table class="footer" width="100%" border="0" cellspacing="0" cellpadding="0">
         <tr>
            <td width="18" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide8_1.html"><img src="images/leftarrow.png" border="0" alt="previous page"/></a></td>
            <td width="40%" height="15" bgcolor="#e4f0f8" align="left"><a href="User guide8_1.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">Application structure</font></a></td>
            <td width="20%" height="15" bgcolor="#e4f0f8" align="center"><a href="index.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">[Top]</font></a></td>
            <td width="40%" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide8_3.html"><font face="arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">updateInterface</font></a></td>
            <td width="18" height="15" bgcolor="#e4f0f8" align="right"><a href="User guide8_3.html"><img src="images/rightarrow.png" border="0" alt="next page"/></a></td>
         </tr>
      </table>
      <font face="Arial" bgcolor="#e4f0f8" size="normal" underline="0" color="#000000">&copy; 2011 The MathWorks Ltd</font>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/license.txt'])">Terms of Use</a>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/patents.txt'])">Patents</a>
      <TT>&#149; </TT><a href="matlab: helpview([matlabroot,'/trademarks.txt'])">Trademarks</a>
   
   </body>
</html>
        
